<template>
	<view>
		<view class=" u-p-r-30 u-p-l-30 u-m-t-20">
			<view class="content wrap">
				<u-form :model="form" ref="uForm" :rules="rules">

					<u-form-item label="月份" label-width="170" left-icon="calendar1">
						<u-input v-model="startTime" type="select" @click="getT()" />
					</u-form-item>
					<u-form-item label="作业日期" label-width="170" left-icon="calendar">
						<u-input v-model="v3" type="select" @click="getC()" />
					</u-form-item>

					<u-form-item label="单位" label-width="150">
						<u-radio-group v-model="settlementMode">
							<u-radio @change="radioChange" v-for="(item, index) in modelist" :key="index"
								:name="item.name">
								{{ item.name }}
							</u-radio>
						</u-radio-group>
					</u-form-item>
					<u-form-item label="项目部" label-width="160" left-icon="home">
						<u-input v-model="form.operateName" type="select" @click="getO()" />
					</u-form-item>
				</u-form>
			</view>
		</view>
		<view class=" u-p-r-30 u-p-l-30 u-m-t-20">
			<view class="title">作业总排名</view>
		</view>
		<view class=" u-p-r-30 u-p-l-30 u-m-t-20">
			<u-table border-color="#18b566" font-size="24">
				<u-tr>
					<u-th>排名</u-th>
					<u-th><span style="width: 210rpx;">项目部</span></u-th>
					<u-th>人员</u-th>
					<u-th v-html="settlementMode"></u-th>
				</u-tr>
				<u-tr v-for="item in dataList" :key="item.id">
					<u-td>{{ item.id }}</u-td>

					<u-td><span style="width: 210rpx;">{{ item.v1 }}</span></u-td>

					<u-td>{{ item.userName }}</u-td>

					<u-td v-if="settlementMode == '体积'">{{ item.volume }}方</u-td>
					<u-td v-else-if="settlementMode == '工时'">{{ item.hours }}h</u-td>
					<u-td v-else-if="settlementMode == '数量'">{{ item.nums }}件</u-td>
					<u-td v-else-if="settlementMode == '重量'">{{ item.weights }}吨</u-td>
					<u-td v-else>无</u-td>
				</u-tr>
				<u-tr v-if="metaskRanking">
					<u-td><span class="weikaishi" v-html="metaskRanking.v2"></span></u-td>

					<u-td><span class="weikaishi" style="width: 210rpx;" v-html="metaskRanking.v1"></span></u-td>

					<u-td><span class="weikaishi" v-html="metaskRanking.userName"></span></u-td>

					<u-td v-if="settlementMode == '体积'"><span class="weikaishi" v-html="metaskRanking.volume"></span>
					</u-td>
					<u-td v-else-if="settlementMode == '工时'"><span class="weikaishi"
							v-html="metaskRanking.hours"></span></u-td>
					<u-td v-else-if="settlementMode == '数量'"><span class="weikaishi" v-html="metaskRanking.nums"></span>
					</u-td>
					<u-td v-else-if="settlementMode == '重量'"><span class="weikaishi"
							v-html="metaskRanking.weights"></span></u-td>
					<u-td v-else>无</u-td>
				</u-tr>
			</u-table>
		</view>
		<view>
			<u-picker v-model="show3" mode="time" :params="params" @confirm="confirm"></u-picker>
		</view>
		<view>
			<u-select v-model="show2" :list="olist" @confirm="confirm2"></u-select>
		</view>
		<view>
			<u-calendar v-model="show" mode="date" max-date="2070-01-01" @change="change"></u-calendar>
		</view>
		<view>
			<u-toast ref="uToast" />
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				form: {
					operateName: '',
					operateId: '',
				},
				dataList: [],
				olist: [],
				flex: '',
				v3: '',
				show: false,
				show2: false,
				show3: false,
				startTime: "",
				settlementMode: '工时',
				modelist: [{
						name: '工时'
					},
					{
						name: '体积'
					},
					{
						name: '重量'
					},
					{
						name: '数量'
					}
				],
				params: {
					year: true,
					month: true,
					day: false,
					hour: false,
					minute: false,
					second: false
				},
				metaskRanking: {},
			}
		},
		onLoad() {
			//#ifdef H5 || APP-PLUS
			this.flex = 'u-flex'
			//#endif
			let year = new Date().getFullYear(); //年
			let month = new Date().getMonth() + 1; //注意！月份是从0月开始获取的，所以要+1;
			let day = new Date().getDate();
			this.startTime = year + '-' + (month >= 10 ? month : '0' + month);
			this.v3 = year + '-' + (month >= 10 ? month : '0' + month) + '-' + (day >= 10 ? day : '0' + day);
			this.$http.post('/rest/operate/list', {}, {
				params: {},
				header: {
					'Authorization': uni.getStorageSync('token'),
				}
			}).then(res => {
				for (let item1 of res.data.data) {
					let obj = {}
					obj.value = item1.id
					obj.label = item1.operateName
					this.olist.push(obj)
				}
			})
			setTimeout(() => {
				this.refresh()
			}, 600)
		},
		onPullDownRefresh() {
			this.refresh()
			uni.stopPullDownRefresh()
		},
		methods: {
			// 选中某个单选框时，由radio时触发
			radioChange(e) {
				this.settlementMode = e
				uni.showLoading({
					title: '加载中'
				})
				this.refresh()
				setTimeout(() => {
					uni.hideLoading()
				}, 500)
			},
			getT() {
				this.show3 = true
			},
			getO() {
				this.show2 = true
			},
			getC() {
				this.show = true
			},
			change(e) {
				this.v3 = e.result
				console.log(e);
				uni.showLoading({
					title: '加载中'
				})
				this.refresh()
				setTimeout(() => {
					uni.hideLoading()
				}, 500)
			},
			confirm2(e) {
				this.form.operateId = e[0].value
				this.form.operateName = e[0].label
				uni.showLoading({
					title: '加载中'
				})
				this.refresh()
				setTimeout(() => {
					uni.hideLoading()
				}, 500)
			},
			confirm(e) {
				this.startTime = e.year + '-' + e.month
				uni.showLoading({
					title: '加载中'
				})
				this.refresh()
				setTimeout(() => {
					uni.hideLoading()
				}, 500)
			},
			refresh() {
				this.$http.post('/rest/taskDetailed/taskRanking', {}, {
					params: {
						startTime: this.startTime,
						settlementMode: this.settlementMode
					},
					header: {
						'Authorization': uni.getStorageSync('token'),
					}
				}).then(res => {
					let arr = []
					let no = 1
					for (let item1 of res.data.data) {
						item1.id = no
						arr.push(item1)
						no++
					}
					this.dataList = arr
				})

				this.$http.post('/rest/taskDetailed/metaskRanking', {}, {
					params: {
						v3: this.v3,
						startTime: this.startTime,
						settlementMode: this.settlementMode
					},
					header: {
						'Authorization': uni.getStorageSync('token'),
					}
				}).then(res => {
					this.metaskRanking = res.data.data
				})
			},
		},
	}
</script>

<style lang="scss">
	.title {
		font-size: 36rpx;
	}
</style>
